<template>
  <div class="yonghu">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/index' }">
        <el-icon><House /></el-icon>首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题 -->
    <div class="title">用户管理</div>
    <!-- 按钮 -->
    <div class="btns">
      <el-button type="primary" @click="openadd()"
        >新增用户<el-icon><Plus /></el-icon
      ></el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="序号" width="100" type="index" />
      <el-table-column label="姓名" prop="name" width="80"> </el-table-column>
      <el-table-column label="账号" prop="number" />
      <el-table-column label="部门" prop="bumen" width="80" />
      <el-table-column label="岗位" prop="gangwei" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="邮件" prop="email" width="200" />
      <el-table-column label="角色" prop="jiaose"> </el-table-column>
      <el-table-column label="状态" prop="zhuangtai">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            @change="changezhuangtai(scope.row.id, scope.row.flag)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增抽屉 -->
    <el-drawer v-model="drawer" title="新增用户" @close="close()">
      <el-form
        :model="form"
        label-width="120px"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-form-item label="账号:" prop="number">
          <el-input v-model="form.number" />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="姓名:" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="部门:" prop="bumen">
          <el-input v-model="form.bumen" />
        </el-form-item>
        <el-form-item label="岗位:" prop="gangwei">
          <el-input v-model="form.gangwei" />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="角色:" prop="jiaose">
          <el-select
            v-model="form.jiaose"
            class="m-1"
            placeholder="请选择"
            size="large"
          >
            <el-option label="超级管理员" value="超级管理员" />
            <el-option label="系统管理员" value="系统管理员" />
            <el-option label="普通角色" value="普通角色" />
            <el-option label="人事管理员" value="人事管理员" />
            <el-option label="薪资管理员" value="薪资管理员" />
            <el-option label="移动端角色" value="移动端角色" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：:" prop="flag">
          <el-select
            v-model="form.flag"
            class="m-1"
            placeholder="请选择"
            size="large"
          >
            <el-option label="启用" :value="true" />
            <el-option label="禁用" :value="false" />
          </el-select>
        </el-form-item>

        <el-button type="primary" @click="add()">保存</el-button>
        <el-button @click="drawer = false">取消</el-button>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { ref, onMounted } from "vue";
import * as request from "@/api/gang/xitong";
var tableData = ref([]);
var drawer = ref(false);
var ruleFormRef = ref();
//规则
var rules = ref({
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  password: [{ required: true, message: "请输入", trigger: "blur" }],
  number: [{ required: true, message: "请输入", trigger: "blur" }],
  bumen: [{ required: true, message: "请输入", trigger: "blur" }],
  gangwei: [{ required: true, message: "请输入", trigger: "blur" }],
  jiaose: [{ required: true, message: "请选择", trigger: "blur" }],
  email: [{ required: true, message: "请输入", trigger: "blur" }],
  phone: [{ required: true, message: "请输入", trigger: "blur" }],
  flag: [{ required: true, message: "请选择", trigger: "blur" }],
});
var form = ref({
  name: "",
  password: "",
  number: "",
  bumen: "",
  gangwei: "",
  jiaose: "",
  email: "",
  phone: "",
  flag: "",
});
onMounted(async () => {
  var res = await request.search_yonghu();
  console.log(res);
  tableData.value = res.data;
});
//打开新增抽屉
var openadd = () => {
  drawer.value = true;
};
//关闭抽屉
var close = () => {
  form.value = {};
};
//新增用户
var add = () => {
  ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      var res = await request.add_yonghu(form.value);
      console.log(form.value);
      ElNotification({
        title: "通知",
        message: "新增员工成功",
        type: "success",
        duration: 2000,
      });
      //关闭抽屉
      drawer.value = false;
      //新增成功后重新渲染页面
      var res = await request.search_yonghu();
      tableData.value = res.data;
    } else {
      ElNotification({
        title: "通知",
        message: "请检查输入信息",
        type: "error",
        duration: 2000,
      });
    }
  });
};
//删除用户
var handleDelete = async (id) => {
  var res = await request.del_yonghu(id);
  console.log(res);
  ElNotification({
    title: "通知",
    message: "删除员工成功",
    type: "success",
    duration: 2000,
  });
  var i = tableData.value.findIndex((item) => item.id == id);
  if (i != -1) {
    tableData.value.splice(i, 1);
  }
};
//修改状态
var changezhuangtai = async (id, flag) => {
  var res = await request.change_zhuangtai({ id, flag });
  console.log(res);
  ElNotification({
    title: "通知",
    message: "修改员工状态成功",
    type: "success",
    duration: 2000,
  });
};
</script>

<style scoped lang="scss">
.yonghu {
  width: 100%;
  .breadcrumb {
    font-size: 20px;
  }
  .title {
    margin: 20px 0;
    padding: 0 0 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }
  .el-table {
    margin-top: 20px;
  }
  .el-drawer {
    .el-input {
      margin: 10px 0;
    }
    .el-button {
      margin: 20px;
    }
  }
}
</style>